<template>
  <div style="padding: 10px; " :style="{height: CONST.WORKSPACE_HEIGHT + 'px', overflow: 'auto'}">
    <div style="color:#666; display: inline-block; ">题型: </div>
    <div style="display: inline-block; ">{{ conflictExerciseGroupArray[0].role }}</div>
    <div v-for="item in conflictExerciseGroupArray">
      <div style="padding: 10px; margin-top: 5px; width: 98%; display: inline-block; background-color: antiquewhite; ">
        <PreviewExerciseEntry1 :exerciseGroup="item" v-if="item.role === CONST.EXERCISE_GROUP_ROLE_A1"/>
        <PreviewExerciseEntryB :exerciseGroup="item" v-else-if="item.role === CONST.EXERCISE_GROUP_ROLE_B"/>
        <PreviewExerciseEntry3 :exerciseGroup="item" v-else-if="item.role === CONST.EXERCISE_GROUP_ROLE_A3
                          || item.role === CONST.EXERCISE_GROUP_ROLE_CASE"/>
      </div>
    </div>
  </div>
</template>

<script>
  import PreviewExerciseEntry1 from "../exerciseBook/PreviewExerciseEntry1";
  import PreviewExerciseEntry3 from "../exerciseBook/PreviewExerciseEntry3";
  import PreviewExerciseEntryB from "../exerciseBook/PreviewExerciseEntryB";
  export default {
    name: "CompareConflict",
    components: {PreviewExerciseEntry1, PreviewExerciseEntry3, PreviewExerciseEntryB},
    props: ['conflictExerciseGroupArray'],
    methods: {

    }
  }
</script>

<style scoped>

</style>
